<template lang="pug">
  .container
    .row
      .col
        .nav__logo student logo
        ul.nav__overwrite
          router-link(tag="li", to="/student", exact, :class="{'active': /lession/.test($route.path)}")
            a 导学本
          router-link(tag="li", to="/student/tutorship")
            a 作业辅导
          router-link(tag="li", to="/student/homework")
            a 网络作业
          router-link(tag="li", to="/student/mistake")
            a 错题集
      .col
        .nav__right
          router-link.nav__notice(to="/notice")
          .nav__user-info(@click="userInfo")
            img.avatar(src="/images/avatar.jpg")
            .nav__user-info__text.d-inline-block(v-if="user")
              strong.d-block {{user.realName}}
              span.d-block {{user.number}}
    .breadcrumb__mod
      .breadcrumb__back <
      ol.breadcrumb
        li.breadcrumb-item
          a(href='#') 当前位置
        li.breadcrumb-item.active 导学本
</template>
<style lang="scss">
.nav__logo {
  float: left;
  width: 120px;
  height: 40px;
  margin-right: 15px;
}
.nav__right {
  float: right;
  margin-top: 35px;
}
.nav__user-info {
  display: inline-block;
  vertical-align: middle;
}
.nav__notice {
  display: inline-block;
  width: 46px;
  height: 46px;
  margin-right: 20px;
  background: url('/images/icon_notice_normal.png') no-repeat 100%;
  vertical-align: middle;
}
.nav__overwrite {
  float: left;
  @include clearfix();
  li {
    float: left;
    width: 90px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 14px;
    &.active {
      background: $mainColor;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      a {
        color: #fff;
      }
    }
  }
  a {
    color: #a5a5a5;
  }
}
.nav__user-info {
  .avatar {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    margin-right: 15px;
    vertical-align: top;
    cursor: pointer;
  }
  font-size: 12px;
  strong {
    margin-bottom: 7px;
  }
}
.breadcrumb__back {
  float: left;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #f2f3f5;
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: $mainColor;
  & + .breadcrumb {
    margin-left: 10 + 46px;
  }
}
.breadcrumb__mod {
  margin-bottom: 15px;
  .breadcrumb {
    padding: 0 18px;
    margin-bottom: 0;
    font-size: 14px;
    background: #f2f3f5;
    line-height: 46px;
    border-radius: 10px;
    font-weight: bold;
  }
  .breadcrumb-item + .breadcrumb-item:before {
    content: '>';
  }
  a {
    color: #000;
  }
}

</style>

<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    user: state => state.user.user.info
  }),
  created () {
    this.$store.dispatch('getUserInfo')
  },
  methods: {
    userInfo () {
      this.$store.commit('switchUserInfo', true)
    }
  }
}
</script>
